<template>
<div class="buy-set-content pl16 pr16">
    <!--商品详情-->
    <div class="common-form">{{$t('product.product_detail')}}</div>
    <el-form-item :label="$t('product.detail_type')">
      <el-radio-group v-model="form.model.isPicture">
        <el-radio :label="0">{{$t('product.rich_text')}}</el-radio>
        <el-radio :label="1">{{$t('product.pure_image')}}</el-radio>
      </el-radio-group>
      <div class="gray9 f12">{{$t('product.unlimited_size')}}</div>
    </el-form-item>
    <el-form-item :label="$t('product.detail_video')">
      <el-row>
        <div class="draggable-list">
          <div
            class="item img-select"
            v-if="!form.model.contentVideoId"
            @click="openProductUpload('video', 'video')"
          >
            <el-icon>
              <Plus />
            </el-icon>
          </div>
          <div v-else>
            <video
              v-if="form.model && form.model.contentVideo"
              width="150"
              height="150"
              :src="form.model.contentVideo"
              :autoplay="false"
              controls
            > {{$t('product.video_tag_not_supported')}} 

</video>

            <div>
              <el-button icon="Delete" @click="delVideo">{{$t('product.delete_video')}}</el-button>
            </div>
          </div>
        </div>
      </el-row>
    </el-form-item>
    <el-form-item :label="$t('product.detail_video_cover')">
      <el-row>
        <div class="draggable-list">
          <div
            class="item img-select"
            v-if="!form.model.contentPosterId"
            @click="openProductUpload('image', 'poster')"
          >
            <el-icon>
              <Plus />
            </el-icon>
          </div>
          <div
            v-else
            class="item"
            @click="openProductUpload('image', 'poster')"
          >
            <img
              v-if="form.model && form.model.contentPoster"
              :src="form.model.contentPoster"
              width="100"
              height="100"
            />

            <a
              href="javascript:void(0);"
              class="delete-btn"
              @click.stop="deleteVideo()"
            >
              <el-icon>
                <Close />
              </el-icon>
            </a>
          </div>
        </div>
      </el-row>
    </el-form-item>
    <!--内容-->
    <el-form-item :label="$t('product.detail_content')" v-if="form.model.isPicture == 0">
      <div class="edit_container">
        <Uediter
          :text="form.model.content"
          :config="ueditor.config"
          ref="ue"
          @contentChange="contentChangeFunc"
        ></Uediter>
      </div>
    </el-form-item>
    <template v-if="form.model.isPicture == 1">
      <el-form-item :label="$t('product.detail_images')">
        <div class="draggable-list">
          <template
            v-if="form.model && form.model.contentImage && form.model.contentImage.length > 0"




          >
            <draggable
              group="people"
              item-key="id"
              class="draggable-list"
              v-model="form.model.contentImage"
            >
              <template #item="{  element,  index}">
                <div class="item">
                  <img v-img-url="element.filePath" />
                  <a
                    href="javascript:void(0);"
                    class="delete-btn"
                    @click.stop="deleteImg(index)"
                  >
                    <el-icon>
                      <CloseBold />
                    </el-icon>
                  </a>
                </div>
              </template>
            </draggable>
          </template>

          <div
            class="item img-select"
            @click="openProductUpload('image', 'image')"
          >
            <el-icon>
              <Plus />
            </el-icon>
          </div>
        </div>
      </el-form-item>
    </template>

    <!--商品图片组件-->
    <Upload
      v-if="is_upload"
      :config="config"
      :isupload="is_upload"
      @returnImgs="returnImgsFunc"
      >{{$t('product.upload_image')}}</Upload
    >
  </div>
</template>

<script>
import Uediter from "@/components/UE.vue";
import Upload from "@/components/file/Upload.vue";
import draggable from "vuedraggable";
export default {
  components: {
    /*编辑器*/
    Uediter,
    Upload,
    draggable
  },
  data() {
    return {
      /*富文本框配置*/
      ueditor: {
        text: "",
        config: {
          initialFrameWidth: 400,
          initialFrameHeight: 500
        }
      },
      is_upload: false,
      config: {
        total: 9,
        fileType: "image"
      },
      file_name: "image"
    };
  },
  created() {},
  inject: ["form"],
  methods: {
    /*获取富文本框内容*/
    getContent: function () {
      //return this.$refs.ue.getUEContent();
    },
    /*获取富文本内容*/
    contentChangeFunc(e) {
      this.form.model.content = e;
    },
    /*打开上传图片*/
    openProductUpload: function (fileType, file_name) {
      this.file_name = file_name;
      if (fileType == "image") {
        this.config = {
          total: 9,
          fileType: "image"
        };
      } else {
        this.config = {
          total: 1,
          fileType: "video"
        };
      }
      this.is_upload = true;
    },
    /*上传商品图片*/
    returnImgsFunc(e) {
      console.log(e, "eeee");
      if (e != null) {
        if (this.file_name == "video") {
          this.form.model.contentVideoId = e[0].fileId;
          this.form.model.contentVideo = e[0].filePath;
        } else if (this.file_name == "image") {
          if (!this.form.model.contentImage) {
            this.form.model.contentImage = [];
          }
          let imgs = this.form.model.contentImage.concat(e);
          this.form.model.contentImage = imgs;
        } else if (this.file_name == "poster") {
          this.form.model.contentPosterId = e[0].fileId;
          this.form.model.contentPoster = e[0].filePath;
        }
      }
      this.is_upload = false;
    },
    /*删除商品图片*/
    deleteImg(e) {
      let n = -1;
      this.form.model.contentImage.forEach((item, index) => {
        if (item.filePath == e.filePath) {
          n = index;
          return;
        }
      });
      if (n >= 0) {
        this.form.model.contentImage.splice(n, 1);
      }
    },
    delVideo() {
      this.form.model.contentVideoId = 0;
      this.form.model.contentVideo = {};
    },
    deleteVideo() {
      this.form.model.contentPosterId = 0;
      this.form.model.contentPoster = {};
    }
  }
};
</script>

